<template>
  <div class="bo">
    <div class="bo-header">
      <span @click="$router.push('/index')">
        <van-icon name="arrow-left" />
      </span>
      <div>直播</div>
      <span></span>
    </div>
    <div class="bo-main">
      <p style="height:10px"></p>
      <div v-for="(item,index) in state.boList" :key="index">
        <div class="box" @click="showPopup(item)">
          <img :src="item.img" alt />
          <div class="p">精彩回放</div>
          <div class="start">
            <van-icon name="play-circle-o" />
          </div>
        </div>
        <h3>{{item.name}}</h3>
        <div class="cont">
          <span style="color:#DCD8BE">
            <van-icon name="tv-o" />
          </span>
          <span class="time">{{item.imgs}}</span>
        </div>
      </div>
      <div class="fix" @click="$router.push('/startBo')">
        <van-icon name="eye-o" />
      </div>
    </div>
    <div class="bo-footer" v-for="(g,i) in state.detail" :key="i">
      <div v-show="state.show" class="popup" @click="stop">
        <div class="stop-box">
          <video
            id="my-video"
            class="video-js vjs-default-skin"
            controls
            preload="none"
            x5-playsinline
            webkit-playsinline
            playsinline
            :poster="g.img"
            x-webkit-airplay="allow"
          >
            <source :src="g.video" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import axios from "../../axios/index.js";
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    const state = reactive({
      boList: [],
      show: false,
      detail: []
    });

    //获取数据
    const getzhibo = () => {
      axios.get("zhibo").then(res => {
        state.boList = res.data;
        let A = []; //按月份排序
        let B = []; //按天数排序
        let C = [];
        C = state.boList.sort((a, b) => {
          return b.id - a.id;
        });
        B = C.sort((a, b) => {
          return b.imgs.slice(9, 10) - a.imgs.slice(9, 10);
        });
        A = B.sort((a, b) => {
          return b.imgs.slice(5, 7) - a.imgs.slice(5, 7);
        });
      });
    };

    getzhibo();
    const showPopup = item => {
      //根据id获取新数组
      state.detail = state.boList.filter(v => v.id == item.id);
      state.show = true;
    };
    const stop = () => {
      state.show = false;
      state.detail = [];
    };
    return {
      state,
      stop,
      showPopup
    };
  }
});
</script>
<style lang="scss" scoped>
.bo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bo-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  height: 50px;
  font-size: 18px;
  background: #1887f6;
  align-items: center;
  color: white;
  span {
    width: 20%;
    margin-left: 10px;
  }
  img {
    margin-right: 10px;
  }
}
.bo-main {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow-y: scroll;
  div {
    margin-top: 20px;
    .box {
      position: relative;
      .p {
        width: 130px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: -15px;
        left: 5px;
        background: #8095e8;
        color: white;
        border-radius: 30px;
        font-size: 13px;
      }
      .start {
        font-size: 70px;
        color: white;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    img {
      width: 100%;
      height: 180px;
    }
    .cont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        margin-left: 7px;
        margin-right: 7px;
        i {
          font-size: 20px;
        }
      }
      .time {
        color: #cdcdcd;
      }
    }
  }
  .fix {
    position: fixed;
    bottom: 4%;
    right: 5%;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: #0272f0;
    color: #48cfe5;
    font-size: 50px;
    border-radius: 50%;
    overflow: hidden;
  }
}
.bo-footer {
  .popup {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 1);
    .stop-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>